<template>
  <div class="card-item-container">
    <div class="card-item-content flex">
      <img
        :src="albumsItem.cover_path"
        alt=""
      />
      <div class="card-item-right flex-c">
        <span class="card-item-right-span1">{{ albumsItem.custom_title?albumsItem.custom_title:'未知标题' }}</span>
        <span class="card-item-right-span2">{{ albumsItem.intro }}</span>
        <div class="card-item-right-info flex">
          <div class="card-item-right-person">
            <svg
              t="1704814442530"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="13296"
              width="16"
              height="16"
            >
              <path
                d="M693.76 929.28h-550.4c-17.92 0-38.4-7.68-48.64-23.04-12.8-15.36-17.92-33.28-15.36-51.2l10.24-74.24c2.56-23.04 17.92-40.96 38.4-51.2 35.84-15.36 99.84-40.96 171.52-58.88-35.84-40.96-66.56-107.52-66.56-222.72 0-174.08 102.4-209.92 186.88-209.92s186.88 35.84 186.88 209.92c0 115.2-28.16 184.32-64 222.72 71.68 15.36 133.12 40.96 168.96 58.88 20.48 10.24 35.84 28.16 38.4 51.2l10.24 74.24c2.56 17.92-2.56 38.4-15.36 51.2-15.36 15.36-33.28 23.04-51.2 23.04z m-276.48-637.44c-94.72 0-135.68 48.64-135.68 158.72 0 140.8 46.08 194.56 87.04 215.04 10.24 5.12 15.36 15.36 12.8 28.16-2.56 10.24-10.24 20.48-20.48 20.48-89.6 12.8-179.2 48.64-215.04 64-5.12 2.56-7.68 5.12-7.68 10.24l-10.24 74.24c0 5.12 2.56 10.24 2.56 12.8 2.56 2.56 5.12 5.12 10.24 5.12h550.4c5.12 0 10.24-2.56 10.24-5.12 2.56-2.56 5.12-5.12 2.56-12.8l-10.24-74.24c0-5.12-2.56-10.24-7.68-10.24-33.28-15.36-122.88-51.2-212.48-64-10.24-2.56-20.48-10.24-20.48-20.48s2.56-23.04 12.8-28.16c56.32-28.16 84.48-102.4 84.48-215.04 2.56-110.08-38.4-158.72-133.12-158.72z"
                fill="#BBBBC2"
                p-id="13297"
              ></path>
              <path
                d="M883.2 801.28h-69.12c-15.36 0-25.6-10.24-25.6-25.6s10.24-25.6 25.6-25.6h69.12c5.12 0 10.24-2.56 10.24-5.12 2.56-2.56 5.12-5.12 2.56-12.8l-10.24-74.24c0-5.12-5.12-10.24-7.68-10.24-33.28-15.36-122.88-51.2-212.48-64-10.24-2.56-20.48-10.24-20.48-20.48s2.56-23.04 12.8-28.16c56.32-28.16 84.48-102.4 84.48-215.04 0-110.08-40.96-158.72-135.68-158.72-48.64 0-84.48 12.8-104.96 40.96-7.68 10.24-25.6 12.8-35.84 5.12-10.24-7.68-12.8-25.6-5.12-35.84 30.72-40.96 81.92-61.44 145.92-61.44 84.48 0 186.88 35.84 186.88 209.92 0 115.2-28.16 184.32-64 222.72 71.68 15.36 133.12 40.96 168.96 58.88 20.48 10.24 35.84 28.16 38.4 51.2l10.24 74.24c2.56 17.92-2.56 38.4-15.36 53.76s-30.72 20.48-48.64 20.48z"
                fill="#BBBBC2"
                p-id="13298"
              ></path>
            </svg>
            <span>{{ albumsItem.nickname }}</span>
          </div>
          <div class="card-item-right-readio">
            <svg t="1704850309153" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2386" width="16" height="16"><path d="M712.148971 414.536224h43.51098v194.927552h-43.51098zM564.212664 287.920502h43.510979v450.335568h-43.510979zM416.276357 179.144076h43.510979v672.239518h-43.510979zM268.341073 76.893274h43.510979v870.213452h-43.510979z" fill="#B7B7B7" p-id="2387"></path></svg>
            <span>{{ albumsItem.category_id}}</span>
          </div>
          <div class="card-item-right-musice">
            <svg t="1704850425586" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3551" width="16" height="16"><path d="M920.8 600.5V491c0-55.7-11-109.8-32.7-160.9-20.9-49.3-50.9-93.6-88.9-131.6-38.1-38.1-82.4-68-131.6-88.9-51.1-21.7-105.2-32.7-160.9-32.7s-109.8 11-160.9 32.7c-49.3 20.9-93.6 50.9-131.6 88.9-38.1 38.1-68 82.4-88.9 131.6-21.9 51.1-32.9 105.2-32.9 160.9v109.5c-21.7 33.2-33.2 73.2-33.2 115.6 0 42.6 11.6 82.7 33.4 116 17.8 27.2 41.7 47.9 68.5 59.8 9.6 32.2 39.5 55.7 74.7 55.7H265c43 0 78-35 78-78v-307c0-43-35-78-78-78h-29.2c-35.2 0-65.1 23.5-74.7 55.7-4.3 1.9-8.6 4.1-12.8 6.5V491c0-48.1 9.5-94.9 28.2-139 18.1-42.6 44-81 77-113.9 33-33 71.3-58.9 113.9-77 44.1-18.7 90.9-28.2 139-28.2 48.1 0 94.9 9.5 139 28.2 42.6 18.1 81 44 113.9 77 33 33 58.9 71.3 77 113.9 18.7 44.1 28.2 90.9 28.2 139v55.8c-4.2-2.4-8.4-4.6-12.8-6.5-9.6-32.2-39.5-55.7-74.7-55.7h-29.2c-43 0-78 35-78 78v307c0 43 35 78 78 78H777c35.2 0 65.1-23.5 74.7-55.7 26.8-12 50.7-32.7 68.5-59.8 21.9-33.3 33.4-73.4 33.4-116 0.4-42.4-11.1-82.3-32.8-115.6z" fill="#999999" p-id="3552"></path></svg>
            <span>{{ albumsItem.play }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps(['albumsItem'])


</script>

<style scoped>
.card-item-container {
  /* width: 100%; */
  /* height: 72px; */
  /* padding: 15px 0px; */
  margin-top: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #E8E8E8;
}
.card-item-container:last-child{
  border-bottom:none;
}
.card-item-content {
  width: 100%;
}
.card-item-content > img {
  width: 70px;
  height: 70px;
  border-radius: 4px;
  margin-right: 10px;
}
.card-item-right {
  flex: 1;
}
.card-item-right-span1 {
  width: 270px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-item-right-span1 {

  color: rgb(51, 51, 51);
  font-size: 16px;
}
.card-item-right-span2 {
  margin-top: 5px;
  font-size: 13px;
  color: #999;
  overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}
.card-item-right-info {
  width: 180px;
  /* height: 30px; */
  justify-content: space-between;
  line-height: 13px;
  /* margin: auto 0px; */

}
.card-item-right-person{
  /* line-height: 10px; */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 80px;
  font-size: 11px;
}
.card-item-right-person > svg {
  width: 13px;
  height: 13px;
  /* margin-right: 2px; */
  margin: auto 0;
}
.card-item-right-person > span {

  font-size: 11px;
  color: #999;
  line-height: 30px;

}
.card-item-right-readio >svg {
  width: 13px;
  height: 13px;
  margin-right: 2px;

}
.card-item-right-readio > span {
  font-size: 11px;
  color: #999;
  line-height: 30px;
}
.card-item-right-musice > svg {
  width: 13px;
  height: 13px;
  margin-right: 2px;
}
.card-item-right-musice > span {
  font-size: 11px;
  color: #999;
  line-height: 30px;
}

</style>
